<template>
  <el-input
    v-model="inputvalue"
    placeholder="搜索 商品/店铺/品牌"
    class="searchinput"
  >
    <template #append>
      <el-icon class="el-input__icon"><search @click="gosearch()" /></el-icon>
    </template>
  </el-input>
</template>


<script setup>
import { ref, defineProps, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { searchproductApi } from "../../api/goods";

let inputvalue = ref("");
const router = useRouter();
const props = defineProps({
  keyword:String
});
onMounted(()=>{
    console.log(props)
    inputvalue.value = props.keyword
})
const getsearchproduct = async () => {
  let data = await searchproductApi(inputvalue.value);
  console.log(data)
  if (data.code == "001") {
    router.push({
      path: "/searchpage",
      query: {
        product: JSON.stringify(data.Product),
        total: data.total,
        keyword: inputvalue.value,
      },
    });
  }
};
const gosearch = () => {
  console.log('search',inputvalue.value)
  if (inputvalue.value == "") {
    return;
  } else {
    getsearchproduct();
  }
};
</script>

<style scoped>
.searchinput {
  margin: 20px;
  height: 60px;
  width: 95%;
  border-radius: 25px !important;
}
</style>
